<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul>
        <li>第1个</li>
        <li>第2个</li>
        <li>第3个</li>
        <li>第4个</li>
        <li>第5个</li>
    </ul>
    <script>
        /* 
            使用let,const关键字声明的变量不能重复定义变量
        */
        // let a = 10;
        // let a = 20;

        // const b = 10;
        // const b = 20;

        // var c = 10;
        // var c = 20;


        // 使用let,const定义的变量没有预解析
        /* console.log(a);//undefined
        var a = 10; */

        // let a = 10;
        // console.log(a);

        // console.log(a);
        // const a = 10;



        //使用let const定义的变量具有块级作用域
        // var lis = document.querySelectorAll("ul li")
        // for(var i = 0 ; i < lis.length ; i++){
        //     lis[i].onclick = function(){
        //         console.log(i);//我点击的是第一个,输出的i是多少?
        //     }
        // }

        //let 块级作用
        let lis = document.querySelectorAll("ul li")
        for(let i = 0 ; i < lis.length ; i++){
            lis[i].onclick = function(){
                console.log(i);//我点击的是第一个,输出的i是多少?
            }
        }
        /* 
        {
            循环第一次
            i = 0 , i < 5
                lis[0].onclick = function(){
                    console.log(0);//0
                } 
        }
        {
            i = 1 , i < 5; 
                lis[1].onclick = function(){
                    console.log(1);
                }
        }
        {
            i = 2 , i < 5; 
                lis[1].onclick = function(){
                    console.log(2);
                }
        }
        {
            i = 3 , i < 5; 
                lis[1].onclick = function(){
                    console.log(3);
                }
        }
        {
            i = 4 , i < 5; 
                lis[1].onclick = function(){
                    console.log(4);
                }
        }
        */
    </script>
</body>

</html>